/* eslint-disable no-undef */
import echarts from 'echarts';

import pic1 from './img/pic1.png';
import pic2 from './img/pic2.png';

let gradient = new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
  {
    offset: 0,
    color: '#044A8E'
  },
  {
    offset: 1,
    color: '#017B9E'
  },
]);

let gradient2 = new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [
  {
    offset: 0,
    color: '#BB442B'
  },
  {
    offset: 1,
    color: '#D47B3A'
  },
]);

let lineStyle = 'rgba(255, 255, 255, 0.2)'
let textStyle = 'rgba(255, 255, 255, 1)'



function getPictorialBar(dt, symbol) {

  return dt.map((v) => {
    return {
      value: v,
      symbol: symbol
    }
  });
}

function getBar(dt, color) {
  return dt.map((v) => {
    return {
      value: v,
      itemStyle: {
        color: color
      }
    }
  });
}


function option2FromData(data) {

  // console.log('data', data);

  // let plusData = data.map(v => v + 1);

  let opt = {

    legend: {
      show: false
    },

    tooltip: {
      show: true,
      formatter(obj) {
        return obj.value.toFixed(2)
      }
    },

    xAxis: {
      data: range(1, data.length + 1),
      axisLine: {
        lineStyle: {
          color: lineStyle
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: lineStyle
        }
      },
      axisLabel: {
        color: textStyle
      },
    },

    yAxis: {
      axisLine: {
        lineStyle: {
          color: lineStyle
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: lineStyle
        }
      },
      axisLabel: {
        color: textStyle
      },

    },

    series: [
      {
        name: 'bar1',
        type: 'bar',
        barWidth: 10,
        data: getBar(data, gradient),
        showBackground: true,
        backgroundStyle: {
          //color: '#fff'
        },
        itemStyle: {
          color: gradient
        },
        zlevel: 0
      },

      {
        name: 'bar2',
        type: 'bar',
        barWidth: 10,
        data: getBar(data, gradient2),
        showBackground: true,
        backgroundStyle: {
          //color: '#fff'
        },
        itemStyle: {
          color: gradient
        },
        zlevel: 1
      },

      /*     {
            name: 'pb1',
            type: 'pictorialBar',
            barGap: '-100%',
            symbolPosition: 'end',
            symbolSize: 15,
            barCategoryGap: '-130',
            data: getPictorialBar(plusData, pic1),
            zlevel: 2
          },
          {
            name: 'pb2',
            type: 'pictorialBar',
            barGap: '-100%',
            symbolPosition: 'end',
            symbolSize: 15,
            barCategoryGap: '-130',
            data: getPictorialBar(plusData, pic2),
            zlevel: 1
          }, */

    ]
  };

  // console.log('opt', opt);
  return opt;
}




export default option2FromData;
